<template>
  <div class="btn-group">
    <el-button-group>
      <el-button type="danger" :icon="Delete" @click="deleteAll"
        >删除全部</el-button
      >
    </el-button-group>
  </div>

  <el-table
    ref="tableRef"
    :data="tableData"
    @sort-change="sortChange"
    tooltip-effect="light"
    :show-overflow-tooltip="true"
    style="width: 100%"
  >
    <el-table-column type="selection" width="55px" />
    <el-table-column prop="username" label="用户名" width="100ox" />
    <el-table-column
      sortable
      fixed
      label="创建日期"
      width="150px"
      prop="reTime"
    >
    </el-table-column>
    <el-table-column
      prop="reIp"
      label="IP"
      fixed
      width="100px"
    />
    <el-table-column prop="reUrl" label="网址" sortable width="100px" />
    <el-table-column prop="reMethod" label="方法" sortable width="100px" />
    <el-table-column prop="accessTime" label="响应时间" sortable width="100px">
      <template #default="scope">
        {{ scope.row.accessTime }} ms
      </template>
    </el-table-column>

    <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button
            link
            type="danger"
            :icon="Delete"
            circle
            size="small"
            @click="deleteRow(scope)"
          ></el-button>
        </template>
      </el-table-column>
   
  </el-table>
  <div class="pagination">
    <el-pagination
      :page-sizes="[2, 5, 20, 40, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      :default-page-size="pagination.size"
      @change="onPaginationChange"
    />
  </div>
</template>

<script setup>
import {
  opLogPage,
  opLogDeleteByUserId,
  opLogDeleteBatch,
  opLogAdd,
  opLogEdit,
} from "@/apis/admin/opLog";
import { Delete, Edit, Plus, Search } from "@element-plus/icons-vue";
import { reactive, onMounted, ref } from "vue";


// 存储表格数据的变量
const tableData = ref([]);
// 搜索输入框搜索条件
const search = reactive({
  title: "",
});

/**
 * 搜索输入框对应的触发事件
 * @param {String} value 输入框值
 */

const onSearchChange = () => {
  getPage();
};

// 存储排序字段
const orders = reactive({
  column: "id",
  isAsc: true,
});
/**
 * 表格排序函数
 * @param {*} column 当前列对
 * @param {*} prop 当前字段
 * @param {*} order 当前排序方式
 */
const sortChange = ({ prop, order }) => {
  console.log(prop, order);

  Object.assign(orders, {
    column: `CAST(${prop} AS UNSIGNED)`,
    isAsc: order === "ascending",
  });
  getPage();
};

/**
 * 删除一行
 * @param {*} scope
 */
const deleteRow = (scope) => {
  console.log(scope);
  opLogDeleteByUserId(scope.row.id).then((result) => {
    console.log(result);
    getPage();
  });
};

/**
 * 获取表格组件引用对象： 前提在表格上加上 ref="tableRef"

 */
const tableRef = ref();
/**
 * 删除全部选中行
 */
const deleteAll = async () => {
  const selectionRows = tableRef.value.getSelectionRows();
  // console.log(selectionRows);
  const ids = await selectionRows.map((row) => {
    return row.id;
  });

  await opLogDeleteBatch(ids);
  getPage();
  // console.log(ids)
};

/**
 * 分页查询
 * @param {*} filter 过滤
 * @param {*} search 搜索
 * @param {*} orders 排序
 */
const getPage = async () => {
  const result = await opLogPage(
    {
      search: search,
      orders: [orders],
    },
    pagination.page,
    pagination.size
  );

  if (result != undefined) {
    tableData.value = result.data.records;
    pagination.total = result.data.total;
  }
};

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0,
});
/**
 * 分页改变函数
 * @param {*} currentPage 当前页
 * @param {*} pageSize 每页条数
 */

const onPaginationChange = (currentPage, pageSize) => {
  pagination.page = currentPage;
  pagination.size = pageSize;
  getPage();
};

// 生命周期
onMounted(() => {
  // 页面加载的时候立刻执行一次请求
  getPage();
});
</script>

<style scoped lang="less"></style>
